
<template>
    <div class="contact-all">
        <div class="contact-content">
            <div class="contact-content-up"><h1>contact me</h1></div>
            <div class="contact-box">
                <input v-model="emailTheme" type="text" class="" placeholder="邮件主题" id="theme"/>
                <input v-model="emailCount" type="text" class="" placeholder="邮箱" id="emails">
                <textarea v-model="emailContent" placeholder="来唠唠嗑呗" id="talk"></textarea>
            </div>
            <div class="contact-button">
                <!-- <input type="submit" value="确定" @click="valid()"/> -->
                <button @click="valid()">确定</button>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            emailTheme:'',
            emailCount:'',
            emailContent:'',
            mydate:''
        }
    },
    methods: {
        valid () {
            let emails = document.getElementById("emails").value;
            let theme = document.getElementById("theme").value;
            let talk = document.getElementById("talk").value;


            if(/^\s*$/.test(theme)){
                alert("请输入邮箱主题");
                event.preventDefault();
                return
            }
            if (!(/^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(emails))){
                alert("请输入正确的邮箱");
                event.preventDefault();
                return
            }
            if(/^\s*$/.test(talk)){
                alert("请输入内容");
                event.preventDefault();
                return
            }
            var date=new Date();
            this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
            
            this.$axios.post("/api/myBlog/send",{
                    geter:'cmove',
                    theme:this.emailTheme,
                    email:this.emailCount,
                    content:this.emailContent,
                    date:this.mydate
                
            }).then(res=>{
                if(res.data==''){
                    alert("发送失败")
                }
                else{
                    alert("发送成功")
                }
            })
        }
    }

}

</script>

<style>
    .contact-all{
        background-color:#3b3d40;
        color: #fff;
    }
    .contact-content{
        width: 610px;
        margin: 0 auto;
        padding-top: 60px;
    }
    .contact-content-up{
        width: 190px;
        border-bottom: 3px solid #27b7d6;
        margin: 0 auto;
        padding-bottom: 15px;
        margin-bottom: 45px;
    }
    .contact-box{
        text-align: left;
    }
    textarea{
        resize: none;
        height: 200px;
        width: 600px;
        background-color: #3b3d40;
        border: 2px solid #fff;
        color: #fff;
        font-size: 16px;
        padding: 7px;
    }
    .contact-box input{
        height: 35px;
        width: 500px;
        margin-bottom: 20px;
        background-color: #3b3d40;
        border: 2px solid #fff;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
    }
    .contact-button{
        text-align: right;
        margin-right: 15px;
    }
    button{
        height: 35px;
        margin-top: 10px;
        margin-bottom: 30px;
        width: 100px;
        background-color: aquamarine;
        border: navajowhite;
        border-radius: 5px;
    }
</style>